import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useMediaQuery } from '@material-ui/core';
import { Grid, Button, Avatar, Typography } from '@material-ui/core';
import { LearnMoreLink } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { Section, SectionAlternate } from 'components/organisms';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { setArtistItem } from 'redux/actions/SearchArtistsAction';

const useStyles = makeStyles(theme => ({
  teamAvatar: {
    width: 250,
    height: 250,
    border: `${theme.spacing(1)}px solid ${theme.palette.background.paper}`,
    boxShadow: `0 2px 10px 0 ${theme.palette.cardShadow}`,
    marginTop: theme.spacing(1 / 2),
  },
  listGrid: {
    overflow: 'hidden',
    marginBottom: theme.spacing(3),
    '&:last-child': {
      marginBottom: theme.spacing(0),
    },
  },
}));

const Webinars = props => {
  const { data, className, ...rest } = props;
  const classes = useStyles();
  const history = useHistory();
  const dispatch = useDispatch();

  const theme = useTheme();
  const isMd = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true,
  });

  const actionItem = (podcast) => {
    dispatch(setArtistItem(podcast));
    history.push(`podcast/${podcast.id}`);
  }

  return (
    <div className={className} {...rest}>
      <SectionHeader
        title={
          <span>
            We’re focused on{' '}
            <Typography color="secondary" variant="inherit" component="span">Trending Podcasts</Typography>
          </span>
        }
        subtitle="Subscribe to listen all the podcasts' seasons."
        fadeUp
      />
      <Grid container>
        {
          data.length > 6 ?
            data.map((item, index) => (
              <Grid
                key={index}
                md={3}
                item
                container
                data-aos={'fade-up'}
                spacing={isMd ? 4 : 2}
                className={classes.listGrid}
                direction={index % 4 > 1 ? 'row-reverse' : 'row'}
                style={{ 'margin': 0 }}
              >
                <Grid item container justifyContent="center" alignItems="center" onClick={e => {
                  e.stopPropagation();
                  actionItem(item);
                }}>
                  <Avatar
                    {...{ src: item.avatarURL }}
                    alt={item.name}
                    className={classes.teamAvatar}
                    onClick={e => {
                      e.stopPropagation();
                      actionItem(item);
                    }}
                  />
                  <SectionHeader
                    label=""
                    justifyContent="center"
                    titleVariant="h5"
                    title={item.name}
                    subtitle={item.bio}
                    style={{ 'marginTop': '1em' }}
                    ctaGroup={[
                      <Button
                        variant="outlined"
                        color="secondary"
                        size={isMd ? 'large' : 'medium'}
                      >
                        Subscribe now
                      </Button>,
                      <LearnMoreLink title="Learn more" variant="body1" />,
                    ]}
                    align={'center'}
                    disableGutter
                  />
                </Grid>
              </Grid>
            )) : data.map((item, index) => (
              <Grid
                key={index}
                item
                container
                data-aos={'fade-up'}
                justifyContent={isMd ? 'space-between' : 'center'}
                spacing={isMd ? 4 : 2}
                className={classes.listGrid}
                direction={index % 2 === 1 ? 'row-reverse' : 'row'}
              >
                <Grid item container xs={12} sm={12} md={7} alignItems="center"
                  onClick={e => {
                    e.stopPropagation();
                    actionItem(item);
                  }}>
                  <SectionHeader
                    label=""
                    titleVariant="h5"
                    title={item.title}
                    subtitle={item.bio}
                    ctaGroup={[
                      <Button
                        variant="outlined"
                        color="secondary"
                        size={isMd ? 'large' : 'medium'}
                      >
                        Subscribe now
                      </Button>,
                      <LearnMoreLink title="Learn more" variant="body1" />,
                    ]}
                    align={isMd ? 'left' : 'center'}
                    disableGutter
                  />
                </Grid>
                <Grid item container justifyContent="center" xs={12} sm={12} md={5}>
                  <Avatar
                    {...{ src: item.avatarURL }}
                    alt={item.title}
                    className={classes.teamAvatar}
                    onClick={e => {
                      e.stopPropagation();
                      actionItem(item);
                    }}
                  />
                </Grid>
              </Grid>
            ))}
      </Grid>
    </div>
  );
};

Webinars.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.array.isRequired,
};

export default Webinars;
